<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>用户列表</title>
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/style/admin.css" media="all">
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
  
  <style>
		#tbl{ margin-top:15px; margin-left:25px; }
		#tbl th{ height:45px; }
		#tbl td{
			font-weight:normal; height:45px;
			font-family:微软雅黑; font-size:17px;
		}
		#tbl [type='text']{
			height:28px; font-size:17px;
			text-indent:0.3em;
		}
		#tbl select { width:200px; height:32px; font-size:17px; }
		#tbl td:nth-child(1){ width:80px; }
		#tbl td:nth-child(2){ width:350px; }
	</style>
</head>
<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>
 
<script type="text/html" id="toolBar">
  <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>
<script type="text/html" id="headToolBar">
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="add">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="update">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="delete">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="search">
    <i class="layui-icon">&#xe615;</i>
  </button>
</div>
</script>

 <script src="${ctxPath}/layuiadmin/layui/layui.js"></script> 
<script src="${ctxPath}/js/jquery-1.11.1.min.js"></script>


<script>
var r=Math.floor(Math.random()*6);
 
layui.use(
	['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], 
	function(){
	  var laydate = layui.laydate //日期
	  ,laypage = layui.laypage //分页
	  ,layer = layui.layer //弹层
	  ,table = layui.table //表格
	  ,carousel = layui.carousel //轮播
	  ,upload = layui.upload //上传
	  ,element = layui.element //元素操作
	  ,slider = layui.slider //滑块
	  ,admin = layui.admin
	  ,form = layui.form;
	  
	  layer.msg('用户列表',{icon:6,time:2000,offset:'20px'});
  
  //{ps} 监听Tab切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +': '+ this.innerHTML, this, {
      tips: 1
    });
  });
  
  //{ps} 执行一个 table 实例
  var ran = Math.random();
  table.render({
    elem: '#demo'
    ,height: 'full-100'
    ,url: '${ctxPath}/User/jsonList?ran='+ ran //数据接口
    ,title: '用户表'
    ,page: true     //{ps} 开启分页
    ,toolbar: '#headToolBar' //{ps} 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: false //{ps} 开启合计行
    ,limit:1000
    ,limits:[10,20,50,100,200,500,1000,2000]
    ,cellMinWidth:80
    ,cols: [[       //{ps} 表头
      {type: 'checkbox'},
      
      {field: 'id', title: 'ID', width:80, sort: true},
      {field: 'account', title: '用户名', width:120},
      {field: 'nickName', title: '昵称', width:80, edit:'text'},
      {field: 'no', title: '工号',sort:true, width:100, edit:'text'},
      {field: 'sex', title: '性别',sort:true, width:80},
      {field: 'roleName', title: '角色名称',sort:true, width:135},
      {field: 'createDate', title: '创建日期',sort:true, width:200},
      
      {fixed: 'right', title:'操作', align:'center', toolbar: '#toolBar',minWidth:120}
    ]]
  });
  
  //{ps} 监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.open({
            type: 2
            ,content: '${ctxPath}/User/viewAddUser'
            ,shadeClose: true
            ,area: ['80%', '80%']
            ,maxmin: true
            ,anim:r
            ,title:'创建'
          });
      break;
      case 'update':
        if(data.length === 0){
        	layer.msg('请选择一行',{icon:2,time:2000,offset:'20px'});
        }  else if(data.length > 1){
        	layer.msg('只能编辑一行',{icon:2,time:2000,offset:'20px'});
        }  else {
        	/* for(var i=0;i<=(checkStatus.data).length;i++){
        		layer.alert(JSON.stringify(checkStatus.data[0]));
        	} */
           editUser( checkStatus.data[0].id ); 
        }
      break;
      case 'delete':
        if(data.length === 0){
        	layer.msg('请选择一行',{icon:2,time:2000,offset:'20px'});
        } else{
        	var s='';
        	for(var i=0;i<(checkStatus.data).length;i++){
        		s=s+JSON.stringify(checkStatus.data[i]['account'])+",";
    		}
        	layer.msg('删除[id]:'+s,{icon:1,time:2000,offset:'20px'});
        	delUser( checkStatus.data[0].id );
        }
      break;
      case 'search':
    	  layer.msg('按键ctrl+F,进行搜索',{icon:3,time:2000,offset:'20px'});
   	  break;
    };
  });
  
  //{ps} 监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data     //获得当前行数据
    , layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
    	layer.msg('查看[id]:'+data.id,{icon:6,time:2000,offset:'20px'});
    } else if(layEvent === 'del'){
      	layer.confirm('真的删除用户么', function(index){
    	layer.msg('删除[id]:'+data.id,{icon:1,time:2000,offset:'20px'});
		delUser( data['id'] );
      });
    } else if(layEvent === 'edit'){
    	//{1} 获取一个用户, 通过 ajax 来获取。
    	//  data['id']: 表格上面的 id 值。
    	layer.msg('编辑[id]:'+data.id,{icon:6,time:2000,offset:'20px'});
		editUser( data['id'] );
    }
  });
  
//监听单元格编辑
  table.on('edit(test)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    $.ajax({
    			url:'${ctxPath}/User/getUser', /* 数据接口 */
    			type:'post',
    			data:{id:data.id},
    			dataType:'json',
    			success:function( resp ){
    				if( resp['result']=='success' ){
    					var _user =resp['user'];
    					_user[field]=value;
    					console.log( _user );
    					$.ajax({
    						url:'${ctxPath}/User/saveUser',
    						type:'post',
    						data:_user,
    						dataType:'json',
    						success:function( resp ){
    							var result = resp['result'];
    							//{ps} 关闭弹窗
    							layer.closeAll();
    							if(result=='success'){
    								layer.msg('更新用户:'+ resp['account'] +'成功',{icon:1,time:2000,offset:'20px'});
    							}else{
    								layer.msg('更新用户:'+ resp['account'] +'失败, 原因: '+ resp['cause'],{icon:2,time:2000,offset:'20px'});
    							}
    						}
    					});
    				}else{
    					layer.msg('访问数据错误。');
    				}
    			}
    		});
  });
  
//监听行双击事件
  table.on('rowDouble(test)', function(obj){
	  editUser( obj.data.id );
  });
  
});


</script>

<!-- {ps} 引入  form.js  -->
<script src="${ctxPath}/js/form.js"></script>

<!-- {ps} 编写我们的 js 代码! -->
<script>
//{ps} 这个是下拉列表{选项数据}
// 临时写死数据, 后面有时间再写一方法, 从后台获取。
var role_data = [
	{text:"请选择角色",val:""},
	{text:"酒店经理",val:"1"},
	{text:"酒店前台",val:"2"},
	{text:"保洁人员",val:"3"},
	{text:"维修人员",val:"4"},
	{text:"后勤人员",val:"5"},
	{text:"公司财务",val:"6"}
];

//{ps} 这个是下拉列表{选项数据}
var sex_data = [
	{text:"请选择性别",val:""},
	{text:"男",val:"男"},
	{text:"女",val:"女"}
];


//readonly: 只读文本框
//type: 组件类型 (text:文本框, select:下拉列表, hide:隐藏域)
//options: 选项数据。

//{ps} 规定了弹框中会显示到哪些表单项目。
//name: 要和后台 JavaBean 命名一样。
var gInputs = [
	{title:"用户帐号", name:"account", readonly:"readonly", type:"text"},
	{title:"用户名称", name:"nickName", type:"text"},
	{title:"设置密码", name:"password", type:"text"},
	{title:"设置工号", name:"no", type:"text"},
	{title:"设置性别", name:"sex", type:"select",options:sex_data},
	{title:"设置角色", name:"roleId", type:"select",options:role_data},
	{name:"id", type:"hide"}
];


function editUser( userId ){
	$.ajax(
		{
			url:'${ctxPath}/User/getUser', /* 数据接口 */
			type:'post',
			data:{id:userId},
			dataType:'json',
			success:function( resp ){
				if( resp['result']=='success' ){
					console.log( resp['user'] );
					onRecvMsg( resp );   //显示对话框
				}else{
					layer.msg('访问数据错误。');
				}
			}
		}
	);
}

//{ps} 当接收到后台发来的 用户数据时，触发该方法。
//     这一个方法会传一个 json 进来。
function onRecvMsg( json ){
	//{ps} 生成表格 HTML
	var HTML = makeTable( gInputs, json['user'] );
	//{ps} 弹出一个对话框。
	HTML="<div class=\"layui-fluid\">"+
	"<div class=\"layui-card\">"+
	"<div class=\"layui-card-header\">新增用户</div>"+
	"<div class=\"layui-card-body\" style=\"padding: 15px;\">"+
	"<form class=\"layui-form\" action=\"\" lay-filter=\"component-form-group\">"+
	"<div class=\"layui-col-md6\">"+
		"<div class=\"layui-form-item\">"+
		"<label class=\"layui-form-label\">用户账号</label>"+
		"<div class=\"layui-input-inline\">"+
		"<input type=\"text\" name=\"account\" lay-verify=\"required\" placeholder=\"请输入账号\" autocomplete=\"off\" class=\"layui-input\">"+
		"</div>"+
		"</div>"+
	"</div>"+
	"<div class=\"layui-col-md6\">"+
		"<div class=\"layui-form-item\">"+
		"<label class=\"layui-form-label\">用户名称</label>"+
		"<div class=\"layui-input-inline\">"+
		"<input type=\"text\" name=\"nickName\" lay-verify=\"required\" placeholder=\"请输入名称\" autocomplete=\"off\" class=\"layui-input\">"+
		"</div>"+
		"</div>"+
	"</div>"+
	"<div class=\"layui-col-md6\">"+
		"<div class=\"layui-form-item\">"+
		"<label class=\"layui-form-label\">设置密码</label>"+
		"<div class=\"layui-input-inline\">"+
		"<input id=\"password\" type=\"password\" name=\"password\" lay-verify=\"pass\" placeholder=\"请输入密码\" autocomplete=\"off\" class=\"layui-input\">"+
		"</div>"+
		"<div class=\"layui-form-mid layui-word-aux\">请填写6到12位密码</div>"+
		"</div>"+
	"</div>"+
	"<div class=\"layui-col-md6\">"+
		"<div class=\"layui-form-item\">"+
		"<label class=\"layui-form-label\">确认密码</label>"+
		"<div class=\"layui-input-inline\">"+
		"<input type=\"password\" name=\"repassword\" lay-verify=\"repass\" placeholder=\"请重复密码\" autocomplete=\"off\" class=\"layui-input\">"+
		"</div>"+
		"<div class=\"layui-form-mid layui-word-aux\">请重复输入密码</div>"+
		"</div>"+
	"</div>"+
	"<div class=\"layui-col-md6\">"+
		"<div class=\"layui-form-item\">"+
		"<label class=\"layui-form-label\">工号</label>"+
		"<div class=\"layui-input-inline\">"+
		"<input type=\"text\" name=\"no\" lay-verify=\"required\" placeholder=\"请输入工号\" autocomplete=\"off\" class=\"layui-input\">"+
		"</div>"+
		"</div>"+
	"</div>"+
	"<div class=\"layui-col-md6\">"+
		"<div class=\"layui-form-item\">"+
		"<div class=\"layui-inline\">"+
		"<label class=\"layui-form-label\">用户角色</label>"+
		"<div class=\"layui-input-inline\">"+
		"<select name=\"roleId\" lay-verify=\"required\" lay-search=\"\">"+
		"<option value=\"\">直接选择或搜索选择</option>"+
		"<option value=\"1\">酒店经理</option>"+
		"<option value=\"2\">酒店前台</option>"+
		"<option value=\"3\">保洁人员</option>"+
		"<option value=\"4\">维修人员</option>"+
		"<option value=\"5\">保洁人员</option>"+
		"<option value=\"6\">后勤人员</option>"+
		"</select>"+
		"</div>"+
		"</div>"+
		"</div>"+
	"</div>"+
	"<div class=\"layui-form-item\">"+
	"<label class=\"layui-form-label\">性别</label>"+
	"<div class=\"layui-input-block\">"+
	"<input type=\"radio\" name=\"sex\" value=\"男\" title=\"男\" checked=\"\">"+
	"<input type=\"radio\" name=\"sex\" value=\"女\" title=\"女\">"+
	"</div>"+
	"</div> "+
	"<div class=\"layui-form-item layui-layout-admin\">"+
	"<div class=\"layui-input-block\">"+
	"<div class=\"layui-footer\" style=\"left: 0;\">"+
	"<button class=\"layui-btn\" lay-submit=\"\" lay-filter=\"component-form-demo1\">立即提交</button>"+
	"<button type=\"reset\" class=\"layui-btn layui-btn-primary\">重置</button>"+
	"</div>"+
	"</div>"+
	"</div>"+
	"</form>"+
	"</div>"+
	"</div>"+
	"</div>";
	layer.open({
         type: 1
         ,title: '编辑用户'      //显示标题栏
         ,closeBtn: false
         ,skin: 'layui-layer-rim'
         ,area: ['450px','400px']
         ,shadeClose: true
         ,id: 'LAY_layuipro'   //设定一个 id, 防止重复弹出
         ,btn: ['保存用户', '关闭']  //{ps} 两个按钮
         ,btnAlign: 'c'        //居中对齐
         ,moveType: 1          //拖拽模式, 0 或者 1
         ,content: HTML        //这是上面生成的表格 html 代码
         ,anim:r
         ,yes: function(){
        	   //{1} 当点击 '保存用户' 时候, 调用这个函数
               saveUser();       //保存用户(写到数据库)
               //不建议这里关闭, 等消息回来才做。
               //layer.closeAll(); //关闭对话框
         }
         ,success: function( layero ){
   				//-----
        	 layui.use('form', function(){
                 var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                 form.render();
                 //form.render();
             });
         }
	});
}    //ENDING {onRecvMsg}

//{1} 清除页面中的 maketable
//{2} 除页面中的 showBox

//{ps}你要获取的项目
var items = [
	"id", "account", "password", "nickName",
	"sex", "roleId", "no"
];

//{ps} 抓取表单数据
function pickData(){
	var obj = {};
	for( var i=0; i<items.length; i++ ){
		var val = $("#"+ items[i]).val();
		obj[ items[i] ] = val;
	}
	return obj;
}

/* 
 *  函数:    saveUser
 *  提交数据, 通过 ajax 对象。
 *	提交地址: /User/saveUser
 *  数据返回: 
    {
	    "result":"success",
	    "account":"andy"
	}
 */
function saveUser(){
	//{1}获取表单数据。
	var _user = pickData();
	console.log("Data:"+ _user );
	//(2)使用 ajax 提交数据
	//(3)地址: /User/saveUser
	$.ajax({
		url:'${ctxPath}/User/saveUser',
		type:'post',
		data:_user,
		dataType:'json',
		success:function( resp ){
			var result = resp['result'];
			//{ps} 关闭弹窗
			layer.closeAll();
			if(result=='success'){
				layer.msg('更新用户：'+resp['account']+'成功',{icon:1,time:2000,offset:'20px'});
				//{1} 1.0秒重新刷新页面。
				setTimeout( reloadPage, 1000 );
			}else{
				layer.msg('更新用户:'+resp['account'] +'失败, 原因:'+ resp['cause'],{icon:2,time:2000,offset:'20px'});
			}
		}
	});
}

function reloadPage(){
	window.location = '${ctxPath}/User/viewList';
}

function delUser( _id ){
	
}

/* //执行一个轮播实例
carousel.render({
  elem: '#test1'
  ,width: '100%' //设置容器宽度
  ,height: 200
  ,arrow: 'none' //不显示箭头
  ,anim: 'fade' //切换动画方式
});

//将日期直接嵌套在指定容器中
var dateIns = laydate.render({
  elem: '#laydateDemo'
  ,position: 'static'
  ,calendar: true //是否开启公历重要节日
  ,mark: { //标记重要日子
    '0-10-14': '生日'
    ,'2018-08-28': '新版'
    ,'2018-10-08': '神秘'
  } 
  ,done: function(value, date, endDate){
    if(date.year == 2017 && date.month == 11 && date.date == 30){
      dateIns.hint('一不小心就月底了呢');
    }
  }
  ,change: function(value, date, endDate){
    layer.msg(value)
  }
});

//分页
laypage.render({
  elem: 'pageDemo' //分页容器的id
  ,count: 8        //总页数
  ,skin: '#1E9FFF' //自定义选中色值
  //,skip: true    //开启跳页
  ,jump: function(obj, first){
    if(!first){
      layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      alert( "TTTTTTTTT" );
    }
  }
});

//上传
upload.render({
  elem: '#uploadDemo'
  ,url: '' //上传接口
  ,done: function(res){
    console.log(res)
  }
});

slider.render({
  elem: '#sliderDemo'
  ,input: true //输入框
}); */
</script>

</body>
</html>        

